<template>
  <div class="table-page">
    <GiTable
        row-key="id"
        title="投递管理"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :disabled-tools="['size']"
        :disabled-column-keys="['name']"
        @refresh="search"
    >
      <template #custom-left>

      </template>
      <template #custom-right>
      </template>
      <template #status="{ record }">
        <a-tag v-if="record.status === 0" color="gray">已送达</a-tag>
        <a-tag v-if="record.status === 1" color="gray">已查阅</a-tag>
        <a-tag v-if="record.status === 2" color="red">不匹配</a-tag>
        <a-tag v-if="record.status === 3" color="blue">一面</a-tag>
        <a-tag v-if="record.status === 4" color="blue">二面</a-tag>
        <a-tag v-if="record.status === 5" color="blue">三面</a-tag>
        <a-tag v-if="record.status === 6" color="blue">HR面</a-tag>
        <a-tag v-if="record.status === 7" color="green">已录用</a-tag>
      </template>
      <template #name="{ record }">
        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link @click="lookResume(record)">预览简历</a-link>
          <a-link @click="onUpdate(record)">修改投递状态</a-link>
        </a-space>
      </template>
    </GiTable>

    <JobPositionResumeAddModal ref="JobPositionResumeAddModalRef" @save-success="search"/>
    <JobPositionResumeDetailDrawer ref="JobPositionResumeDetailDrawerRef"/>
  </div>
</template>

<script setup lang="ts">
import JobPositionResumeAddModal from './JobPositionResumeAddModal.vue'
import JobPositionResumeDetailDrawer from './JobPositionResumeDetailDrawer.vue'
import {
  type JobPositionResumeResp,
  type JobPositionResumeQuery,
  listJobPositionResume
} from '@/apis'
import type {TableInstanceColumns} from '@/components/GiTable/type'
import {useDownload, useTable} from '@/hooks'
import {isMobile} from '@/utils'

defineOptions({name: 'JobPositionResume'})

const route = useRoute();
const _positionId = route.query.positionId;

const queryForm = reactive<JobPositionResumeQuery>({
  resumeId: "",
  positionId: _positionId as any || "",
  sort: ['createTime,desc']
})


const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete
} = useTable((page) => listJobPositionResume({...queryForm, ...page}), {immediate: true})

const columns: TableInstanceColumns[] = [
  {title: '投递者姓名', dataIndex: 'studentName', slotName: 'studentName'},
  {title: '岗位名称', dataIndex: 'positionName', slotName: 'positionName'},
  {title: '简历名称', dataIndex: 'resumeName', slotName: 'resumeName', width: 400},
  {title: '状态', dataIndex: 'status', slotName: 'status'},
  {
    title: '操作',
    slotName: 'action',
    width: 300,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
  }
]

// 重置
const reset = () => {
  queryForm.resumeId = ""
  queryForm.positionId = ""
  search()
}

const JobPositionResumeAddModalRef = ref<InstanceType<typeof JobPositionResumeAddModal>>()
// 新增
const onAdd = () => {
  JobPositionResumeAddModalRef.value?.onAdd()
}
const lookResume = (item: JobPositionResumeResp) => {
  window.open("http://localhost:8000/file/" + item.url)
}
// 修改
const onUpdate = (item: JobPositionResumeResp) => {
  JobPositionResumeAddModalRef.value?.onUpdate(item.id)
}

const JobPositionResumeDetailDrawerRef = ref<InstanceType<typeof JobPositionResumeDetailDrawer>>()
// 详情
const onDetail = (item: JobPositionResumeResp) => {
  JobPositionResumeDetailDrawerRef.value?.onDetail(item.id)
}
</script>

<style lang="scss" scoped></style>
